<template>
    <div>
        <label>招工信息名称：</label>
        <Input type="text" v-model="searchForm.name" placeholder="招工信息名称" style="width: 200px;"/>
        <label>工作地址：</label>
        <Select v-model="searchForm.province" @on-change="changeProvince" style="width:100px;">
            <Option v-for="item in provinces" :value="item.name" :key="item.name">{{item.name}}</Option>
        </Select>
        <Select v-model="searchForm.city" @on-change="changeCity" style="width:100px;">
            <Option v-for="item in cities" :value="item.name" :key="item.name">{{item.name}}</Option>
        </Select>
        <Select v-model="searchForm.area" style="width:100px;">
            <Option v-for="item in areas" :value="item" :key="item">{{item}}</Option>
        </Select>
        <label>联系人：</label>
        <Input type="text" v-model="searchForm.contactsMan" placeholder="联系人姓名" style="width: 100px;"/>
        <label>公司名称：</label>
        <Input type="text" v-model="searchForm.companyName" placeholder="公司名称" style="width: 200px;"/>
        <label>工种：</label>
        <Select v-model="searchForm.workType" style="width:240px;" :multiple="true">
            <Option v-for="item in workType" :value="item" :key="item"></Option>
        </Select>
        审核状态：
        <Select v-model="searchForm.companyStatus" style="width:100px;margin-right: 20px;">
            <Option v-for="item in statusList" :value="item.value" :key="item.value">{{ item.label }}</Option>
        </Select>
        <Button type="primary" @click="search">搜索</Button>
        <Table stripe border :columns="columns" :data="rows" style="margin-top:10px;"></Table>
        <Page :total="total" :page-size="pageCount" @on-change="pageChange" style="margin-top:10px;text-align:center;"/>
        <modal width="800" :title="modal.title" v-model="modal.show">
            <Form :model="form" :rules="rule" :label-width="140">
                <FormItem label="招工信息名称：">
                    <label>{{form.name}}</label>
                </FormItem>
                <FormItem label="公司名称：">
                    <label>{{form.companyName}}</label>
                </FormItem>
                <FormItem label="公司实名状态：">
                    <label>{{form.companyStatus==0?'未实名':(form.companyStatus==1?'已实名':'实名不通过')}}</label>
                </FormItem>
                <FormItem label="招工职位及人数：">
                    <Tag color="primary" v-for="(item,index) in form.workType">{{item}}-{{form.workCount[index]}}人</Tag>
                </FormItem>
                <FormItem label="工作地址：">
                    <label>{{form.province}}--{{form.city}}--{{form.area}}</label>
                </FormItem>
                <FormItem label="联系人：">
                    <label>{{form.contactsMan}}</label>
                </FormItem>
                <FormItem label="联系人电话：">
                    <img :src="form.contactsPhone">
                </FormItem>
            </Form>
        </modal>
        <modal v-model="idImg.show">
            <img :src="idImg.idCardImg">
        </modal>
    </div>
</template>
<script>
    import util from '../../libs/util';

    let baseRouter = '/admin/job';
    let modalName = '招工';
    export default {
        data() {
            return {
                modal: {
                    show: false,
                    title: '',
                    isAdd: true,
                },
                idImg: {
                    show: false,
                    idCardImg: '',
                },
                columns: [
                    {title: '招工信息名称', key: 'name', width: 180},
                    {title: '省(工作地址)', key: 'province', width: 110},
                    {title: '市', key: 'city', width: 100},
                    {title: '区', key: 'area', width: 100},
                    {title: '企业名称', key: 'companyName', width: 200},
                    {
                        title: '企业状态', key: 'companyStatus', width: 200, render: (h, params) => {
                            return h('span', {}, params.row.companyStatus == 0 ? '未审核' : (params.row.companyStatus == 1 ? '已审核' : '审核未通过'))
                        }
                    },
                    {title: '企业ID', key: 'companyId', width: 200},
                    {title: '联系人', key: 'contactsMan', width: 100},
                    {title: '联系电话', key: 'contactsPhone', width: 100},
                    {
                        title: '招工职位', key: 'workType', render: (h, params) => {
                            return h('span', {}, params.row.workType.join(','))
                        }
                    },
                    {
                        title: '操作', key: '_id', width: 150, render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small',
                                        shape: 'circle'
                                    },
                                    style: {
                                        marginRight: '10px',
                                    },
                                    on: {
                                        click: () => {
                                            this.edit(params.index);
                                        }
                                    }
                                }, '详情'),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small',
                                        shape: 'circle'
                                    },
                                    on: {
                                        click: () => {
                                            this.remove(params.index);
                                        }
                                    }
                                }, '删除')
                            ]);
                        }
                    },
                ],
                total: 0,
                page: 1,
                pageCount: 12,
                workType: [],
                expectCities: [],
                provinces: [],
                cities: [],
                areas: [],
                rows: [],
                form: {},
                statusList: [
                    {value: -1, label: "所有招工信息"},
                    {value: 0, label: "未实名招工信息"},
                    {value: 1, label: "已实名招工信息"}
                ],
                searchForm: {
                    name: '',
                    province: '',
                    city: '',
                    area: '',
                    workType: [],
                    contactsMan: '',
                    companyStatus: -1,
                    companyName: '',
                },
                rule: {
                    key: [],
                },
                loginData: '',

            }
        },
        created() {
            this.$vnode.fnContext.menuText = '业务管理';
            this.$vnode.fnContext.optionText = `${modalName}管理`;
            this.loginData = JSON.parse(localStorage.getItem('LOGINDATA'));
            this.getWorkType();
            this.getExpectCities();
            this.getProvince();
            this.getList();
        },
        methods: {
            edit(index) {
                Object.assign(this.form, this.rows[index]);
                this.modal.isAdd = false;
                this.modal.show = true;
                this.modal.title = `${modalName}详情`;
            },
            remove(index) {
                util.getAdminJsonData(`${baseRouter}/remove`, {job_id: this.rows[index]._id}, this, (data) => {
                    console.log(data);
                    this.getList();
                });
            },
            getList() {
                let params = {};
                util.loginId = this.loginData.loginId;
                util.token = this.loginData.token;
                params = {
                    name: this.searchForm.name,
                    province: this.searchForm.province,
                    city: this.searchForm.city,
                    area: this.searchForm.area,
                    workType: this.searchForm.workType.join(','),
                    contactsMan: this.searchForm.contactsMan,
                    page: this.page,
                    rows: this.pageCount,
                    companyName: this.searchForm.companyName,
                    companyStatus: this.searchForm.companyStatus,
                }
                util.postAdminJsonData(`${baseRouter}/list`, params, this, (data) => {
                    console.log(data);
                    this.total = data.totalCnt;
                    this.rows = data.jobs;
                });
            },
            pageChange(current) {
                this.page = current;
                this.getList();
            },
            search() {
                this.page = 1;
                this.getList();
            },

            getWorkType() { //获取新增表单中的工作
                util.getAdminJsonData(`/admin/dictionary/getJSON`, {key: '工种'}, this, (data) => {
                    this.workType = data;
                });
            },
            getExpectCities() { //获取期望工作城市
                util.getAdminJsonData(`/admin/dictionary/getJSON`, {key: '期望工作城市'}, this, (data) => {
                    this.expectCities = data;
                });
            },
            getProvince() { //省市区
                util.getAdminJsonData(`/admin/dictionary/getJSON`, {key: '省市区'}, this, (data) => {
                    this.provinces = data;
                });
            },
            changeProvince(value) {
                let p = this.provinces.find((item) => {
                    return item.name === value
                });
                if (!!p) {
                    this.searchForm.city = [p.children[0].name];
                    this.cities = p.children;
                }
            },
            changeCity(value) {
                let p = this.cities.find((item) => {
                    return item.name === value
                });
                if (!!p) {
                    this.searchForm.area = [p.children[0]];
                    this.areas = p.children;
                }
            },
            show(index) {
                this.idImg.show = true;
                this.idImg.idCardImg = this.rows[index].idCardImg;
            },
            validate(item, isValid) {
                console.log(item);
                let params = {
                    wk_id: item._id,
                    isRealName: isValid ? '1' : '0'
                };
                util.postAdminJsonData(`${baseRouter}/validate`, params, this, (data) => {
                    console.log(data);
                    this.modal.show = false;
                    this.$Notice.success({
                        desc: '审核成功 '
                    });
                });
            },
        }
    }
</script>
